import type { PickerOption } from 'vant';
import { ref } from 'vue';

import { deserialize } from '@/plugins/reflect-metadata';

import { getCardInstance } from '../api';
import CardInstance, { CardInfo, CardInfoQuery } from '../models/CardInstance';

const useCardInfo = () => {
  const params = ref<CardInfoQuery>(new CardInfoQuery());

  const state = ref<{ data: CardInfo; loading: boolean; total: number}>({
    data: new CardInfo(),
    loading: false,
    total: 0,
  });

  const faceValueList = ref<PickerOption[]>([]);

  const fetchData = async (id: string) => {
    try {
      state.value.loading = true;
      params.value.cardProductId = id;
      const { data } = await getCardInstance(params.value);
      const resultData = deserialize(data, CardInstance);
      state.value.data = resultData.data;
      faceValueList.value = resultData.data.items;
      state.value.total = resultData.total;
    } catch (error) {
      //
    } finally {
      state.value.loading = false;
    }
  };
  return {
    params,
    state,
    faceValueList,
    fetchData,
  };
};

export default useCardInfo;
